<!-- Author: Edwin -->
<!-- Date: 10/27/2020 -->
<template>
  <el-card shadow="never"
           class="aui-card--fill api-settine-css">
    <el-form label-width="150px">
      <el-form-item :label="$t('custom.apisetting.status')">
        <el-switch v-model="dataForm.status"
                   :active-value='1'
                   :inactive-value='0'></el-switch>
      </el-form-item>
      <el-form-item :label="$t('custom.apisetting.token')">
        <el-input v-model="dataForm.token"
                  style="width:60%;margin-right:10px;"
                  readonly></el-input>
        <el-link :underline="false"
                 @click="copyData(dataForm.token)">
          <i class="el-icon-document-copy"></i>
        </el-link>
      </el-form-item>
      <el-form-item>
        <el-button @click="getToken"
                   size="small"
                   type="primary">{{ $t('custom.apisetting.generateBtn') }}</el-button>
      </el-form-item>
      <div class="line el-form-item"></div>
      <el-form-item :label="$t('custom.apisetting.rateLimit')">
        <el-input v-model="dataForm.currentLimitingByMinutes"
                  class="small-custom-input"></el-input>
        {{ $t('custom.apisetting.rateLimitAfterText1') }}
        <el-input v-model="dataForm.recoverByMinutes"
                  class="small-custom-input"></el-input>
        {{ $t('custom.apisetting.rateLimitAfterText1') }}
      </el-form-item>
      <el-form-item :label="$t('custom.apisetting.dailyDataPullSize')">
        <el-input v-model="dataForm.currentLimitingByDay"
                  class="small-custom-input"></el-input>
        {{ $t('custom.apisetting.dailyDataPullSizeAfterText') }}
      </el-form-item>
      <el-form-item>
        <el-button @click="saveConfig"
                   size="small"
                   type="primary">{{ $t('custom.apisetting.saveBtn') }}</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { copyData } from '../../../../utils/index'
export default {
  data () {
    return {
      dataForm: {
        status: null,
        token: null,
        currentLimitingByMinutes: null,
        recoverByMinutes: null,
        currentLimitingByDay: null
      }
    }
  },
  created () {
    this.getConfigInfo()
  },
  methods: {
    saveConfig () {
      const params = {
        ...this.dataForm
      }
      this.$interface.um.updateUserConfigAPI(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message.success(res.msg)
        })
        .catch(() => { })
    },
    getToken () {
      this.$interface.um.getUserApiTokenAPI()
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$set(this.dataForm, 'token', res.data)
        })
        .catch(() => { })
    },
    getConfigInfo () {
      this.$interface.um.getUserConfigInfoAPI(this.$store.state.user.tenantCode)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.dataForm = Object.assign({}, res.data)
        })
        .catch(() => { })
    },
    copyData (data) {
      copyData(data)
      if (data) {
        this.$message.success('Copy Success!')
      }
    }
  }
}
</script>

<style lang='scss'>
.api-settine-css {
  .small-custom-input {
    width: 6em;
    .el-input__inner {
      border: none;
      border-radius: 0;
      border-bottom: 1px solid #dcdfe6;
      text-align: center;
    }
  }
}
</style>
<style lang="scss" scoped>
.line {
  width: 100%;
  height: 0;
  border-bottom: 1px solid #dcdfe6;
}
</style>
